    <template>
        <el-card class="box-card" v-show="show">
            <el-form :model="formData" :rules="rules" class="demo-ruleForm" ref="ruleFormRef">
                <span>&nbsp;&nbsp;&nbsp;人员基础信息</span>
                <hr>
                <div class="info">
                    <el-form-item label="id" prop="id">
                        <el-input v-model="formData.id" placeholder="请输入" size="default" class="custom-input gray-bg"
                            :label-width="100" />
                    </el-form-item>
                    <el-form-item label="人员名称" prop="name">
                        <el-input v-model="formData.name" placeholder="请输入" class="custom-input gray-bg" size="default"
                            :label-width="100" />
                    </el-form-item>
                    <el-form-item label="手机号" prop="tel">
                        <el-input v-model="formData.tel" placeholder="请输入" class="custom-input gray-bg" size="default"
                            :label-width="100" />
                    </el-form-item>
                    <el-form-item label="人员角色" prop="player">
                        <el-select v-model="formData.player" placeholder="请选择" class="transparent-select">
                            <el-option label="主管" value="主管" />
                            <el-option label="农场主" value="农场主" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="农场职务" prop="job">
                        <el-select v-model="formData.job" placeholder="请选择" class="transparent-select">
                            <el-option label="农场主" value="农场主" />
                            <el-option label="植保负责人" value="植保负责人" />
                            <el-option label="地块负责人" value="地块负责人" />
                            <el-option label="种植工人" value="种植工人" />
                            <el-option label="采摘员" value="采摘员" />
                            <el-option label="气象检测员" value="气象检测员" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上级人员" prop="top">
                        <el-select v-model="formData.top" placeholder="请选择" clearable class="transparent-select">
                            <el-option label="无" value="无" />
                            <el-option label="农场主" value="农场主" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" prop="note">
                        <el-input v-model="formData.note" :label-width="80" class="custom-input gray-bg"
                            placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="分配地块" prop="soil">
                        <el-select v-model="formData.soil" placeholder="请选择" multiple class="transparent-select">
                            <el-option label="地块1" value="地块1" />
                            <el-option label="地块2" value="地块2" />
                            <el-option label="地块3" value="地块3" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="最近一次登录的时间" prop="time">
                        <el-date-picker v-model="formData.time" type="dates" class="custom-input gray-bg"
                            placeholder="请选择时间" />
                    </el-form-item>
                </div>
                <span>&nbsp;&nbsp;&nbsp;账号信息</span>
                <hr>
                <div class="login">
                    <el-form-item label="登录账号" prop="account">
                        <el-input v-model="formData.account" :label-width="80" class="custom-input gray-bg"
                            placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="登录密码" prop="password">
                        <el-input type="password" v-model="formData.password" class="custom-input gray-bg"
                            :label-width="80" placeholder="请输入" />
                    </el-form-item>
                </div>
                <el-form-item>
                    <div style="margin-left: 400px;">
                        <el-button type="info" @click="show = false">取消</el-button>
                        <el-button type="success" @click="submitForm">添加</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>
    </template>

<script lang='ts' setup>
import type { FormInstance } from 'element-plus'
import { reactive, ref } from 'vue'
const emits = defineEmits(['addPeopleInfo'])
let show = defineModel({ required: true })
//  定义 Form 实例的 ref，与模板中 ref="formRef" 对应（注意避免和 formData 重名）
// const formRef = ref<FormInstance | undefined>(undefined)
const ruleFormRef = ref<FormInstance>()
const formData = reactive({
    id: '',
    name: '',
    tel: '',
    time: '',
    player: '',
    job: '',
    top: '',
    note: '',
    soil: [],
    account: '',
    password: ''
})
const rules = reactive({
    id: [
        { required: true, message: "请输入id", trigger: 'blur' },
    ],
    name: [
        { required: true, message: "请输入人员名称", trigger: 'blur' },
    ],
    tel: [
        { required: true, message: "请输入电话", trigger: 'blur' },
    ],
    player: [
        { required: true, message: '请输入人员角色', trigger: 'blur', },
    ],

    top: [
        { required: true, message: '请输入上级人员', trigger: 'blur', },
    ],
    account: [
        { required: true, message: '请输入登录账号', trigger: 'blur' }
    ]


})


const submitForm = async (formEl: FormInstance | undefined) => {
    if (!ruleFormRef.value) return;
    await ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
            const now = new Date()
            formData.time = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`
            emits('addPeopleInfo', { ...formData })
        } else {
            console.log('error submit!', fields)
        }
    })
}



</script>

<style lang='scss' scoped>
.info {
    width: 500px;
    height: 350px;
    margin: 30px auto;
}

span {
    display: flex;
    align-items: center;
    font-size: 20px;
    height: 50px;
    color: #fff;
    font-weight: 700;
    border-left: 3px solid #197C8A;
}

:deep(.transparent-select .el-select__wrapper) {
    // 触发框背景透明
    background-color: #2C4353 !important;
    // 去除默认边框
    border: none !important;
    // 去除聚焦时的阴影
    box-shadow: none !important;
}

.login {
    display: flex;
    align-items: center;
    width: 500px;
    height: 100px;
    line-height: 100px;
    margin: auto;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 1000px;
    height: 800px;
    margin: auto;
    border: 1px solid #000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

:deep(.custom-input .el-input__wrapper) {
    background-color: #2C4353 !important;
    border: none !important;
    // 去除聚焦时的阴影
    box-shadow: none !important;
}
// 隐藏table最下面的边框线
.el-table::befor{
    display: none;
}
</style>